import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:get/get.dart';
import 'package:yt_devops/components/log_utils.dart';
import 'package:yt_devops/resources/str_res_keys.dart';

/**
 *
 * @Description TODO
 * @Author liuer
 * @CreateTime 2024年03月27日 10:16
 */
class ElectricityStatisticsChart extends StatelessWidget {
  final List<dynamic> data; //充电量

  final List<String> paramList;
  final String? tooltipFormatter;
  final List<dynamic>? timeList;
  // final num maxValue;
  // final num minValue;
  const ElectricityStatisticsChart({
    super.key,
    required this.data,

    required this.paramList,
    required this.timeList,
    // required this.maxValue,
    // required this.minValue,
    this.tooltipFormatter,
  });

  @override
  Widget build(BuildContext context) {
    // Log.d('data===' + maxValue.toString());
    // Log.d('timeList===' + timeList.toString());
    return Echarts(
      captureHorizontalGestures: true,
      option: '''
 {
  color: ['#3DD598', '#007DFF'],
  /// 横轴
  xAxis: {
    type: 'category',  
            
    data: ${jsonEncode(timeList)},  
          splitLine: {
        lineStyle: {
          type: 'dashed', //虚线
        },
      },             
    axisLine:{
      show: false,
    }, 
    axisTick: {
      show: false
    }, 
    axisLabel: {
      color: '#999999',
      fontSize: 11,
      // interval: function (index) { // 自定义间隔函数 
      //     if (index % 4 === 0) { // 每四小时显示一次  // 返回值是五分钟为一个间隔
      //         return true;
      //     } else {
      //         return false;
      //     }
      // },
    },
  },
  yAxis: [
  
    {
      type: 'value',
      name:  ${jsonEncode('kWh')},
         max:function (value) {
             return (typeof value.max === 'number' && isNaN(value.max))?1:null;
        },
       min:function (value) {
             return (typeof value.min === 'number' && isNaN(value.min))?0:null;
        },
      nameTextStyle: {
        align: "center"
      },
      align: 'left',
          axisLabel: {
      color: '#999999',
      fontSize: 11,
    },
       alignTicks: true,
      padding: [3, 4, 5, 6],
      verticalAlign: 'bottom',
      nameLocation: 'end',
      position: 'left',
      splitLine: {
        lineStyle: {
          type: 'dashed', //虚线
        },
      },
    },
    // {
    //   type: 'value',
    //   name: ${jsonEncode('${ResKey.income.tr}(${ResKey.yuan.tr})')},
    //    nameTextStyle: {
    //     align: "center"
    //   },
    //   nameLocation: 'end',
    //   splitLine: {
    //     lineStyle: {
    //       type: 'dashed', //虚线
    //     },
    //   },
    // },
  ],
  grid: {
    top: 30,
    bottom: 0,
    containLabel: true,
    right: 35,
    left: 20,
  },
//   legend: {
//     show: true,
//     icon: 'rect',
//
//     bottom:5,
//     itemHeight: 3,
//     itemWidth: 12,
//      textStyle: {
//       borderRadius: [2, 2, 2, 2]
//     },
//     padding: [
//     0,  // 上
//     0, // 右
//     0,  // 下
//     0, // 左
// ]
//   },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0,0,0,0.85)',
    borderWidth: 0,
    opacity: 0.2,
    confine: true,
    padding: [
      10, // 上
      8, // 右
      10, // 下
      8 // 左
    ],
    textStyle: {
      color: 'white',
       fontSize:11
    },
    formatter: $tooltipFormatter
  
  },
  dataZoom: [
    {
      type: 'inside',
      realtime: false,
    },
    // {
    //   start: 0,
    //   end: 100,
    //   height: 15,
    //   realtime: false,
    // },
  ],
  series: ${jsonEncode(data)},
}
  ''',
    );
  }
}
